<template>
  <button @click="flag = !flag">switch</button>
  <!-- transition 组件，控制内部元素的动画切换效果 -->
  <!-- name 属性：设置 transition 组件的 class 属性，可以通过类选择器访问 name 属性来设置 css 样式 -->
  <!-- 其内部的元素必须为动态，即具备创建和销毁生命周期 -->
  <!-- 用 transition 组件包裹内部元素，设置组件切换时的动画 -->
  <transition
    enter-active-class="e-active"
    enter-from-class="e-from"
    enter-to-class="e-to"
    leave-active-class="animate__animated  animate__fadeOut"
    name="fade"
  >
    <div class="box" v-if="flag"></div>
  </transition>
</template>
<script setup lang="ts">
// transition 组件，用于控制其内部组件的创建和销毁的动画效果

// transition 组件可以设置 name 属性，实质为设置类名，可以通过类选择器来设置样式
// 可以设置 enter-active-class 等一系列属性来自定义组件创建和销毁动画的设置类名
// 此后可以根据自定义的类型来操作类选择器，一般是与第三方动画样式库合用
// 可以设置 :duration 自定义属性来控制动画时长，默认为总时长，可以通过配置对象来设置创建或销毁的时长
// <transition
// name="className"
// enter-active-class="e-active-name"
// :duration="{ enter: 50, leave: 100 }"></transition>

// .name-enter-from 设置创建时初始帧样式
// .name-enter-active 设置创建时的动画效果 transition: all(内部所有组件) 1s(动画时间) ease(动画效果)
// .name-enter-to 设置创建完成时的结束帧样式，只持续一帧，此后会立刻切换为静态样式，即一般与静态样式一致
// .name-leave-from 设置销毁时初始帧样式，但实质会从静态样式开始为第一帧，所有一般不设置

import { ref } from 'vue'
import 'animate.css'
// 定义 flag 控制是否显示元素
const flag = ref<boolean>(false)
</script>
<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
/* 通过 .name-ernter-from 选择器来设置组件创建的初始帧样式 */
.e-from {
  width: 0px;
  height: 0px;
}
/* 通过 .name-ernter-active 选择器来设置组件创建动画效果 */
/* 可以设置 transition 效果，包括是否全设置 all 时间 t 动画效果 */
.e-active {
  transition: all 1s ease;
}
/* 通过 .fade-enter-to 选择器来设置组件创建完成时的效果，此样式仅有一帧，一般与静态样式保持一致，过渡平滑 */
.e-to {
  width: 200px;
  height: 200px;
  background-color: red;
}
/* 通过 .name-ernter-from 选择器来设置组件销毁的初始帧样式，一般与静态样式一致 */
/* ？？？ 实际动画不会显示，会从静态样式开始动画 */
.fade-leave-form {
  width: 200px;
  height: 500px;
  background-color: pink;
}
.fade-leave-active {
  transition: all 5s ease;
}
.fade-leave-to {
  width: 0px;
  height: 0px;
  background-color: yellow;
}
</style>
